<template>
  <div class="refundDetele pageWrapper">
    <Loading :loading="loading">
      <Form :ref="formRef" :label-width="160" :model="formData" inline>
        <Card :bordered="true">
          <p slot="title">渠道退款订单信息</p>
        <FormItem label="渠道退款订单号:" style="width:30%">
          <div>{{formData.flowId}}</div>
        </FormItem>
        <FormItem label="退款支付订单号:" style="width:30%">
          <div>{{formData.paymentId}}</div>
        </FormItem>
        <FormItem label="源支付订单号:" style="width:30%">
          <div>{{formData.payFlowId}}</div>
        </FormItem>
        <FormItem label="订单金额:" style="width:30%">
          <div>{{formData.orderAmount ? `${formData.orderAmount / 100}元` : ''}}</div>
        </FormItem>
        <FormItem label="交易金额:" style="width:30%">
          <div>{{formData.amount ? `${formData.amount / 100}元` : ''}}</div>
        </FormItem>
        <FormItem label="通道费率:" style="width:30%">
          <div>{{formData.slottingRate}}%</div>
        </FormItem>
        <!-- <FormItem label="通道费:" style="width:30%">
          <div>{{formData.slottingFees ? `${formData.slottingFees / 100}元` : ''}}</div>
        </FormItem> -->
        <FormItem label="退款状态:" style="width:30%">
          <Tag v-if="formData.refundStatus && formData.refundStatus==='success'" color="success">{{ formData.refundStatusCn }}</Tag>
          <Tag v-else-if="formData.refundStatus && formData.refundStatus==='fail'" color="error">{{ formData.refundStatusCn }}</Tag>
          <Tag v-else-if="formData.refundStatus && formData.refundStatus==='wait'" color="warning">{{ formData.refundStatusCn }}</Tag>
          <Tag v-else color="default">{{ formData.refundStatusCn }}</Tag>
        </FormItem>
        <FormItem label="源支付场景:" style="width:30%">
          <div>{{ formData.paySceneCn }}</div>
        </FormItem>
        <FormItem label="支付渠道:" style="width:30%">
          <div>{{ formData.paymentChannelCn }}</div>
        </FormItem>
        <FormItem label="支付方式:" style="width:30%">
          <div>{{ formData.paymentWayCn }}</div>
        </FormItem>
        <FormItem label="退款支付订单创建时间:" style="width:30%">
          <div>{{formData.createTime}}</div>
        </FormItem>
        <FormItem label="交易时间:" style="width:30%">
          <div>{{formData.flowTime}}</div>
        </FormItem>
        <FormItem label="用户ID:" style="width:30%">
          <div>{{formData.userId}}</div>
        </FormItem>
        
       <!-- <Authc permissions="trade:payment:manager">
          <FormItem prop="items" label="商品列表:" style="width:90%">
            <ItemsListTable :taxpayerId="taxpayerId" />
          </FormItem>
        </Authc> -->
        </Card>
      </Form>

      <Card :bordered="true">
        <p slot="title">渠道支付订单明细</p>
      <Table
        maxHeight="auto"
        ref="tables"
        size="small"
        :data="flowDetail"
        :columns="flowDetailColumns"
        :border="true"
        :show-header="true"
      />
      </Card>
      <Button type="primary" @click="goBack">返回</Button>
    </Loading>
  </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../Module/refundOrder.js";
import {Table,InputNumber,Input,Button,Select,Form,FormItem,Message,Option} from "view-design";
import Loading from "@/components/Loading";
//import RemoteSelect from "@/components/RemoteSelect";
//import RemoteTableSelect from "@/components/RemoteTableSelect";
import SearchBar from "@/components/SearchBar";
import Uuid from "uuid";
import Authc from "@/components/Authc";
import util from "@/utils/util";
//import ItemsListTable from '../../taxpayerItems/ItemsListTable';
export default {
  components: {InputNumber,Loading,Input,Button,Form,FormItem,Message,
    SearchBar,SearchBarItem: SearchBar.SearchBarItem,Select,Option,Authc,Table},
  props: ["id"],
  beforeMount: async function() {
    let id = this.$route.query.id;
    let response = await this.$store.dispatch(`${namespace}/getDetail`, id);
    if (response.errorCode === 0) {
      this.formData = response.data;
      this.getFlowDetail();
    }
  },
  data: function() {
    let vm = this;
    return {
      taxpayerId: this.$route.params.id,
      formRef: Uuid.v1(),
      formData: {},
      payStatus: [], // 支付状态
      payment: [], // 支付方式
      paymentChannel: [], // 支付渠道
      refundStatus: [], // 退款状态
      payScence: [], // 支付场景
      flowDetail: [], // 流水明细
      flowDetailColumns: [
        {
          title: "退款流水号",
          key: "flowId",
          align: "center",
          // fixed: "left",
          minWidth: 220,
        },
        {
          title: "退款订单号",
          key: "paymentId",
          align: "center",
          // fixed: "left",
          minWidth: 220,
        },
        {
          title: "子订单业务单号",
          key: "subOrderId",
          align: "center",
          // fixed: "left",
          minWidth: 220,
        },
        {
          title: "子订单金额",
          key: "orderAmount",
          align: "center",
          // fixed: "left",
          minWidth: 120,
          render: (h, params) => {
            let item = params.row.orderAmount / 100;
            return h('span', util.toMoney(item));
          }
        },
        {
          title: "子订单退款金额",
          key: "amount",
          align: "center",
          // fixed: "left",
          minWidth: 120,
          render: (h, params) => {
            let item = params.row.amount / 100;
            return h('span', util.toMoney(item));
          }
        },
        {
          title: "子订单优惠金额",
          key: "discount",
          align: "center",
          // fixed: "left",
          minWidth: 120,
          render: (h, params) => {
            let item = params.row.discount / 100;
            return h('span', util.toMoney(item));
          }
        },
        {
          title: "清分状态",
          key: "settleStatus",
          align: "center",
          // fixed: "left",
          minWidth: 150,
          render: (h, params) => {
            let item = params.row.settleStatus;
            let text=''
            if(item==='ING'){
              text='清分中'
            }else if(item==='SUCCESS'){
              text='清分成功'
            }else if(item==='ERROR'){
              text='清分失败'
            }
            return h('span', text);
          }
        },
      ],
    };
  },
  created () {
    this.getSearchKey()
  },
  methods: {
    getSearchKey () {
      this.$store.dispatch(`${namespace}/getSearchKey`).then((res)=>{
        if (res.data.errorCode === 0) {
          let data = res.data.data;
          this.payStatus = data.paymentOrderPayStatus;
          this.payment = data.paymentSubChannel;
          this.paymentChannel = data.paymentChannel;
          this.refundStatus = data.paymentRefundStatus;
          this.payScence = data.paySceneStatus;
        }
      })
    },
    goBack () {
      this.$router.go(-1);
    },
    async getFlowDetail() {
      const res = await this.$store.dispatch(`${namespace}/getFlowDetail`, {
        flowId: this.formData.flowId,
      });

      if (res.data.errorCode === 0) {
        console.log("async getFlowDetail", res.data.data);
        this.flowDetail = res.data.data || [];
      }
    },
  },
  computed: {
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    }
  }
};
</script>

<style lang="less" scoped>
  .refundDetele{
    .title {
      border-bottom: 1px solid #999;
      padding-bottom: 6px;
    }
  }
</style>
